<template>
  <div class="index-box" ref="index">
    <div class="backBox">
        <span class="back" @click="back"><i class="el-icon-back"></i>返回</span>
    </div>
    <div class="title">
      加盟申请资料信息
    </div>
    <div class="main">
      <el-form id="userDialog" :model="user" label-position="right" :rules="rules" ref="user">
        <div class="d-flex">
          <div class="left-box">
              <el-form-item label="姓名:" prop="name"  label-width="165px">
                <el-input v-model="user.name" autocomplete="off" :disabled="isRealName" ></el-input>
              </el-form-item>
              <el-form-item label="身份证号:" prop="idcardNumber" label-width="165px">
                <el-input v-model="user.idcardNumber" autocomplete="off" :disabled="isRealName"></el-input>
              </el-form-item>
              <el-form-item label="手机号:" prop="telephone" label-width="165px">
                <el-input v-model="user.telephone" autocomplete="off"  :disabled="isRealName"></el-input>
              </el-form-item>
              <el-form-item label="地址:" prop="areaCode" label-width="165px" class="address-box">
                  <el-cascader
                   style="width:280px"
                   size="large"
                   :options="cascaderOptions"
                   v-model="user.areaCode"
                   @change="addressChange">
                  </el-cascader>

              </el-form-item>
              <el-form-item label="详细地址:" prop="address" label-width="165px">
                 <el-input v-model="user.address" autocomplete="off" type="textarea" rows="3"></el-input>
              </el-form-item>
              <el-form-item label="开户银行:" prop="bankName" label-width="165px">
                 <el-input v-model="user.bankName" autocomplete="off" ></el-input>
              </el-form-item>
              <el-form-item label="银行账号:" prop="bankNumber" label-width="165px">
                 <el-input v-model="user.bankNumber" autocomplete="off" ></el-input>
              </el-form-item>
              <el-form-item label="加盟等级:" prop="levelId" label-width="165px">
                <el-select filterable clearable v-model="user.levelId" placeholder="请选择加盟等级" style="width: 280px;">
                  <el-option :label="item.name+'('+item.unionFee+'万加盟金)'" :value="item.levelId" v-for="item in levelList" v-if="item.levelId!='1'"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="加盟推荐人:" prop="referrerTelephone" label-width="165px">
                 <el-select filterable clearable v-model="user.referrerTelephone" placeholder="请输入推荐人手机号" style="width: 280px;" :disabled="referrerTelephoneDisabled">
                   <el-option :label="item" :value="item" v-for="item in phoneList"></el-option>
                 </el-select>
              </el-form-item>
          </div>
          <div class="right-box">
              <el-form-item label="身份证正面图:" prop="idFrontPic" label-width="165px">
                  <MyUpImg :imagePreview='user.idFrontPic' imageSize="chang" @change="imageChange($event,'idFrontPic')" :disabled="isRealName"></MyUpImg>
              </el-form-item>
              <el-form-item label="身份证反面图:" prop="idBackPic" label-width="165px">
                  <MyUpImg :imagePreview='user.idBackPic' imageSize="chang" @change="imageChange($event,'idBackPic')" :disabled="isRealName"></MyUpImg>
              </el-form-item>
              <el-form-item label="上传凭证:" prop="transferVoucherPic" label-width="165px" class="voucherBox">
                  <MyUpImg :imagePreview='user.transferVoucherPic' imageSize="chang" @change="imageChange($event,'transferVoucherPic')"></MyUpImg>
                  <span style="color:#61997A;cursor: pointer;margin-left:10px" @click="transferVoucherPicVisible=true">查看凭证</span>
              </el-form-item>
          </div>
        </div>
        </el-form>
    </div>

    <div class="active d-flex justify-center" style="">
      <el-button type="primary" @click="submitUser('user')"  :loading="userLoading">提交审核</el-button>
    </div>

    <el-dialog title="查看凭证" width="1200px" v-dialogDrag  :visible.sync="transferVoucherPicVisible" @close="transferVoucherPicVisible = false">
        <el-image src="https://qianzhi-mall.oss-cn-guangzhou.aliyuncs.com/minipro/images/heTong.jpg"></el-image>
    </el-dialog>
  </div>
</template>

<script>
  import common from '@/api/api';
  import { unionSave,getExistAndLevel,getUnionTel,selReturnedValue } from '@/api/getData';
  import { regionData,CodeToText } from 'element-china-area-data';
  import option from '../../common/option.js';
  import { isCard,isPhone,isBankNumber } from '../../common/validate.js';
  export default {
    data() {
      return {
        loading: false,
        userLoading:false,
        transferVoucherPicVisible:false,
        levelList:[],
        imageUrl: '',
        cascaderOptions:regionData,/*省市区插件数据*/
        phoneList:[],
        referrerTelephoneDisabled:false,//是否禁用加盟推荐人
        addressText:'',
        isRealName:false,//1已实名
        user:{
          name:'',
          telephone:"",
          idcardNumber:'',
          areaCode:'',
          address:'',
          bankName:'',
          bankNumber:'',
          levelId:'',
          idFrontPic:'',
          idBackPic:'',
          transferVoucherPic:'',
          customerId:'',//主键id
          referrerTelephone:''
        },
        rules:{
          name: [
            { required: true, message: "请输入姓名", trigger: "blur" }
          ],
          telephone: [
            { required: true, validator: isPhone, trigger: "blur" }
          ],
          idcardNumber: [
            { required: true, validator: isCard, trigger: "blur" }
          ],
          areaCode: [
            { required: true, message: "请选择地址", trigger: "blur" }
          ],
          address: [
            { required: true, message: "请输入详细地址", trigger: "blur" }
          ],
          bankName: [
            { required: true, message: "请输入开户银行", trigger: "blur" }
          ],
          bankNumber: [
            { required: true, validator: isBankNumber, trigger: "blur" }
          ],
          levelId: [
            { required: true, message: "请选择加盟等级", trigger: "blur" }
          ],
          transferVoucherPic:[
            { required: true, message: "请上传凭证", trigger: "blur" }
          ],
          idFrontPic:[
            { required: true, message: "请上传身份证正面图", trigger: "blur" }
          ],
          idBackPic:[
            { required: true, message: "请上传身份证反面图", trigger: "blur" }
          ],
        }
      }
    },
    mounted() {
      this.user.customerId = this.$route.query.customerId;

      this.getSelectList();
    },
    methods: {
      getSelectList(){
        getExistAndLevel({customerId:this.user.customerId}).then(res=>{
         this.levelList = this.levelListTransition(res.data.catalogLevelList,res.data.existLevelList)
        })
        getUnionTel().then(res=>{
         this.phoneList = res.data;
        })
        if(this.$route.query.type=='add'){/*新增时候个人信息回填*/
          selReturnedValue({customerId:this.user.customerId}).then(res=>{
            if(res.code == '200'){
              this.isRealName = res.data.realname=='1'?true:false;
              if(res.data.realname == '1'){
                this.user.name = res.data.name;
                this.user.idcardNumber = res.data.idcardNumber;
                this.user.idFrontPic = res.data.idcardFrontPic;
                this.user.idBackPic = res.data.idcardBackPic;
              }
              this.user.telephone = res.data.telephone?res.data.telephone:'';
              this.user.bankName = res.data.bankName?res.data.bankName:'';
              this.user.bankNumber = res.data.bankNumber?res.data.bankNumber:'';
              if(res.data.unionPhone){/*有推荐人*/
                this.referrerTelephoneDisabled = true;
                this.user.referrerTelephone = res.data.unionPhone;
              }
            }
          })
        }
      },
      back(){
        this.$router.go(-1);
      },
      imageChange(path, name) {
        this.user[name] = path
      },
      addressChange(arr) {
          this.addressText = CodeToText[arr[0]]+CodeToText[arr[1]]+CodeToText[arr[2]];
      },
      levelListTransition(catalogLevelList,existLevelList){/*等级转换*/
        let levelList = [];
        if(!existLevelList.length){
          levelList = catalogLevelList;
        }else{
           for(let i=0;i<catalogLevelList.length;i++){
              for(let a=0;a<existLevelList.length;a++){
                if(catalogLevelList[i].levelId == existLevelList[a].levelId){
                  catalogLevelList[i].status = 'false';
                }
              }
            }
            console.log(catalogLevelList)
            for(let i=0;i<catalogLevelList.length;i++){
              if(catalogLevelList[i].status!='false'){
                levelList.push(catalogLevelList[i])
              }
            }
        }
        console.log(levelList);
        // levelList.map(item=>{
        //   item.name = item.name+'('+item.unionFee+'万元)'
        // })
        return levelList;
      },
      submitUser(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.userLoading = true;
            let data = JSON.parse(JSON.stringify(this.user));
            data.address = this.addressText + data.address;
            data.areaCode = data.areaCode.join(',');
            unionSave(data).then((result) => {
              if (result.code == 200) {
                this.$message.success(result.msg);
                this.$router.go(-1);
              } else {
                this.$message.error(result.msg);
              }
              this.userLoading = false;
            });
          }
        })
      },
    }
  }
</script>

<style scoped lang="scss">
  .voucherBox /deep/ .el-form-item__content{
    display:flex;

  }
  .index-box{
    height: 100%;
    overflow-y: auto;
  }
  .index-box /deep/ .el-form-item{
    margin-bottom:20px;
  }
  .title{
    font-size:15px;
    color: #606266;
    font-weight:700;
    margin:30px 0;
  }
  .address-box  /deep/ .el-form-item__content{
    display: flex;
  }

    .index-box /deep/ .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
    .index-box{
      .left-box{
        width:50%;
        padding:0 50px;
      }
      .right-box{
        width:50%;
        padding:0 50px;
      }
    }
</style>
